<template>
    <div id="bgBox" style="padding-top: 90px;">

        <div style="background: #fff;width: 63%;margin: 0 auto 55px;border-radius: 13px;">
            <img src="../../assets/images/7.jpg" style="max-width: 94%;border-radius: 6px;margin: 17px 3% 11px;" />
        </div>

        <van-cell-group style="background: initial;width: 80%;margin: 0px auto;">
            <van-field v-model="form.u_email" class="whitecolor" type="number" label="手机号" style="background: transparent;color: #fff;" placeholder="请输入" :error-message="rules.u_email" />
            <!-- <van-field v-model="form.u_email_code" center label="邮箱验证码" placeholder="请输入邮箱验证码" :error-message="rules.u_email_code">
                <van-button slot="button" size="small" type="primary" :disabled="countdown" @click="getmcode">{{getcodeTxt}}</van-button>
            </van-field> -->
            <van-field v-model="form.u_code" class="whitecolor" label="邀请码" placeholder="请输入邀请码" style="background: transparent;color: #fff;" :error-message="rules.u_code" />
            <van-field v-model="form.u_password" class="whitecolor" type="password" label="密码" style="background: transparent;color: #fff;" placeholder="请输入密码" :error-message="rules.u_password" />
            <van-field v-model="form.confirm_password" class="whitecolor" type="password" label="确认密码" style="background: transparent;color: #fff;" placeholder="请再次输入密码" :error-message="rules.confirm_password" />
        </van-cell-group>
        <div class="text-center margin_t30">
            <van-button type="primary" class="width_80p btn_size_40 transparent" @click="onSubmit">注 册</van-button>
        </div>
        <div class="text-right padding_lr15 margin_t15">
            <router-link to="/login" class="whitecolor font_13">已有账号？去登录</router-link>
        </div>
    </div>
</template>
<style>
    html,body{
        height: 100vh;
    }
    #bgBox{
        height: calc(100vh - 90px);
        background: url('../../assets/images/6.jpg') no-repeat;
    }
</style>

<script>

    import { isvalidPhone, isvalidTel, checkEmail, checkIdcard } from '@/assets/js/validate.js'
    import '@/assets/css/main.css'

    export default {
        data(){
            return{
                form: {
                    'u_email': '',
                    'u_code': '',
                    // 'u_email_code': '',
                    'u_password': '',
                    'confirm_password': '',
                },
                rules: {
                    'u_email': '',
                    'u_code': '',
                    'u_email_code': '',
                    'u_password': '',
                    'confirm_password': '',
                },
                getcodeTxt: '获取验证码',
                countdown: false,  //60s倒计时  按钮不可点击
            }
        },
        methods: {
            //校验字段
            verification(obj){

                let state = true;
                
                //自定义校验
                if(!isvalidPhone(this.form.u_email)){
                    this.rules.u_email = '请输入正确的手机号';
                    return false;
                }else{
                    this.rules.u_email = '';
                    state = false;
                }

                //不为空的校验
                
                for(var i = 0;i<obj.zero.length;i++){
                    if(this.form[obj.zero[i].name] == ''){
                        this.rules[obj.zero[i].name] = obj.zero[i].error;
                        return false;
                    }else{
                        this.rules[obj.zero[i].name] = '';
                        state = false;
                    }
                }

                //两次密码的校验
                if(this.form.u_password != this.form.confirm_password){
                    this.rules.confirm_password = '两次密码输入不一致';
                    return false;
                }else{
                    this.rules.confirm_password = '';
                    state = false;
                }

                if(!state){
                    return true;
                }

            },
            //提交
            onSubmit(){

                var _this = this;
                
                let obj = {};
                obj.zero = [
                    // {'name': 'u_email_code','error': '请输入邮箱验证码'},
                    {'name': 'u_code','error': '请输入邀请码'},
                    {'name': 'u_password','error': '请输入密码'},
                    {'name': 'confirm_password','error': '请再次输入密码'},
                ];
                obj.customized = ['u_email'];
                
                if(_this.verification(obj)){
                    //提交
                    this.$httpPost('/api/index/login/register',_this.form).then(response => {
                    
                        if(response.code == 200){

                            _this.$toast(response.msg);

                            setTimeout(() => {
                                _this.$router.push({
                                    path: '/login',
                                });
                            }, 2000);
                            

                        }else{
                            
                            this.$toast(response.msg);
                        }

                    });
                    
                }
            },
            //获取验证码
            getmcode(){
                
                var _this = this;
                
                if(!_this.form.u_email){
                    _this.$toast('请先输入邮箱地址');
                    return;
                }else{
                    if(!checkEmail(this.form.u_email)){
                        _this.$toast('请输入正确的邮箱地址');
                        return;
                    }
                }

                this.$httpGet('/api/index/mail/email',{
                    'u_email': _this.form.u_email,
                    'type': 1,
                }).then(response => {
                
                    if(response.code == 200){
                        _this.$toast(response.msg);

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
                this.countdownFun();
            },
            //验证码  60s   倒计时
            countdownFun(){
                
                var _this = this;
                let time = 60;
                _this.getcodeTxt = time + 's后重试';
                _this.countdown = true;
                let interval = setInterval(() => {
                    if(time > 0){
                        time --;
                        _this.getcodeTxt = time + 's后重试';
                    }else{
                        clearInterval(interval);
                        _this.countdown = false;
                        _this.getcodeTxt = '获取验证码';
                    }
                }, 1000);
            },
        },
        mounted(){
            
        },
    }
</script>